<template>
  <div class="user-avatar" :class="{ clickable: clickable }" @click="handleClick">
    <n-avatar
      :size="size"
      :src="avatarUrl"
      :color="avatarColor"
      :style="avatarStyle"
      :fallback-src="fallbackSrc"
      class="avatar"
    >
      <template #fallback>
        <span class="avatar-text">{{ avatarText }}</span>
      </template>
    </n-avatar>
    
    <!-- 在线状态指示器 -->
    <div v-if="showStatus" class="status-indicator" :class="statusClass"></div>
    
    <!-- 等级徽章 -->
    <div v-if="showLevel && level" class="level-badge">
      {{ level }}
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { getUserAvatarUrl, generateAvatarPlaceholder } from '@/utils/auth'

interface Props {
  // 用户信息
  user?: {
    id?: number
    username?: string
    nickname?: string
    email?: string
    mobile?: string
    avatar?: string
    gender?: number
    birthday?: string
    motto?: string
    score?: number
    money?: number
    group_id?: number
    status?: number
    level?: number
    create_time?: number
    update_time?: number
    last_login_time?: number
  } | null
  // 头像大小
  size?: number | 'small' | 'medium' | 'large'
  // 是否可点击
  clickable?: boolean
  // 是否显示在线状态
  showStatus?: boolean
  // 是否显示等级
  showLevel?: boolean
  // 自定义头像URL
  src?: string
  // 自定义显示文本
  text?: string
  // 自定义颜色
  color?: string
  // 备用头像
  fallbackSrc?: string
}

interface Emits {
  (e: 'click', user?: Props['user']): void
}

const props = withDefaults(defineProps<Props>(), {
  size: 'medium',
  clickable: false,
  showStatus: false,
  showLevel: false,
  fallbackSrc: '/placeholder-avatar.svg'
})

const emit = defineEmits<Emits>()

// 头像URL
const avatarUrl = computed(() => {
  if (props.src) return props.src
  if (props.user?.avatar) return getUserAvatarUrl(props.user.avatar)
  return undefined
})

// 头像文本
const avatarText = computed(() => {
  if (props.text) return props.text
  const name = props.user?.nickname || props.user?.username || '?'
  return generateAvatarPlaceholder(name)
})

// 头像颜色
const avatarColor = computed(() => {
  if (props.color) return props.color
  
  // 根据用户名生成颜色 - 使用更适合深色模式的颜色
  const name = props.user?.nickname || props.user?.username || ''
  const colors = [
    'var(--n-error-color)', 'var(--n-warning-color)', 'var(--n-success-color)', 'var(--n-info-color)',
    'var(--n-primary-color)', '#667eea', '#9f7aea', '#ed64a6',
    '#f093fb', '#a8edea', '#ffeaa7', '#ff9a9e'
  ]
  
  let hash = 0
  for (let i = 0; i < name.length; i++) {
    hash = name.charCodeAt(i) + ((hash << 5) - hash)
  }
  
  return colors[Math.abs(hash) % colors.length]
})

// 头像样式
const avatarStyle = computed(() => {
  const style: Record<string, any> = {}
  
  if (props.clickable) {
    style.cursor = 'pointer'
    style.transition = 'all 0.2s ease'
  }
  
  return style
})

// 状态类名
const statusClass = computed(() => {
  const status = props.user?.status
  return {
    'status-online': status === 1,
    'status-offline': status === 0 || status === undefined
  }
})

// 等级
const level = computed(() => {
  return props.user?.level
})

// 点击处理
const handleClick = () => {
  if (props.clickable) {
    emit('click', props.user)
  }
}
</script>

<style scoped>
.user-avatar {
  position: relative;
  display: inline-block;
}

.user-avatar.clickable .avatar {
  cursor: pointer;
  transition: all 0.2s ease;
}

.user-avatar.clickable:hover .avatar {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.avatar-text {
  font-weight: 600;
  font-size: 0.9em;
}

/* 状态指示器 */
.status-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--n-card-color);
  z-index: 1;
}

.status-online {
  background-color: var(--n-success-color);
}

.status-offline {
  background-color: var(--n-text-color-3);
}

/* 等级徽章 */
.level-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
  line-height: 1.2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .status-indicator {
    width: 10px;
    height: 10px;
  }
  
  .level-badge {
    font-size: 9px;
    padding: 1px 4px;
  }
}
</style>
